<template>
  <div class="app-container">
    <el-row type="flex" justify="end">
      <el-button @click="openFormHandle('ADD')">新增</el-button>
    </el-row>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column prop="id" align="center" label="ID" width="95" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="region" label="地区" />
      <el-table-column label="日期">
        <template slot-scope="scope">
          {{ scope.row.date1 | date }} {{ scope.row.date2 | time }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="date2" label="时间" /> -->
      <el-table-column prop="delivery" label="是否延时配送">
        <template slot-scope="scope">
          <el-tag :type="scope.row.delivery | statusFilter">{{ scope.row.delivery ? '是' : '否' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template slot-scope="scope">
          <el-tag v-for="(item, index) of scope.row.type" :key="index">
            {{ item }}
          </el-tag>
          <!-- {{ scope.row.type | type }} -->
        </template>
      </el-table-column>
      <el-table-column prop="resource" label="资源" />
      <el-table-column prop="desc" label="简介" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="primary" size="small" @click="openFormHandle('EDIT', scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleRemove(scope.row)">删除</el-button>
          </el-button-group>
          <!-- {{ scope.row.type | type }} -->
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
    <el-dialog title="收货地址" v-if="showDialog" :visible.sync="showDialog">
      <dialog-form
        :formData="formData"
        :type="formType"
        @onCancel="closeFormHandle"
        @onAdd="handleAdd"
        @onUpdate="handleUpdate"
      />
    </el-dialog>
  </div>
</template>

<script>
import { getList, add, update, remove } from '@/api/example'
import dialogForm from './components/dialogForm'
import { parseTime } from '@/utils'

export default {
  components: {
    dialogForm
  },
  /** 过滤器  */
  filters: {
    statusFilter(status) {
      const statusMap = {
        true: 'success',
        false: 'gray'
      }
      return statusMap[status]
    },
    date(date) {
      if (!date) {
        return ''
      }
      return parseTime(new Date(date), '{y}-{m}-{d}')
    },
    time(date) {
      if (!date) {
        return ''
      }
      return parseTime(new Date(date), '{h}:{i}:{s}')
    },
    type(array = []) {
      return array.join(', ')
    }
  },
  data() {
    return {
      showDialog: false,  // 表单是否打开
      list: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      listLoading: true,
      formType: 'ADD',   // or EDIT 表单类型
      formData: {}  // 表单数据
    }
  },
  created() {
    // 组件初始化钩子 在这里请求并初始化数据
    this.fetchData()
  },
  methods: {
    // 列表数据请求
    fetchData() {
      this.listLoading = true
      const { pageSize, pageNum } = this

      getList({
        pageSize, pageNum
      }).then(response => {

        const { list, total, pageSize, pageNum } = response.data
        this.list = list
        this.total = total
        this.pageSize = pageSize
        this.pageNum = pageNum
        this.listLoading = false
      })
    },

    // 表单添加回调
    async handleAdd(data) {
      const res = await add(data)

      if (res.code === 0) {
        this.$message({ type: 'success', message: '添加成功' })
        // 关闭弹窗
        this.closeFormHandle()
      } else {
        this.$message({ type: 'error', message: '添加失败' })
      }

      // 请求结束刷新列表
      this.fetchData()
    },

    // 表单修改回调
    async handleUpdate(data) {
      const res = await update(data)
      if (res.code === 0) {
        this.$message({ type: 'success', message: '修改成功' })
        // 关闭弹窗
        this.closeFormHandle()
      } else {
        this.$message({ type: 'error', message: '修改失败' })
      }

      // 请求结束刷新列表
      this.fetchData()
    },

    // 删除回调
    async handleRemove(data) {
      const res = await remove(data)
      if (res.code === 0) {
        this.$message({ type: 'success', message: '删除成功' })
        // 关闭弹窗
        this.closeFormHandle()
      } else {
        this.$message({ type: 'error', message: '删除失败' })
      }

      // 请求结束刷新列表
      this.fetchData()
    },

    // 表单打开
    openFormHandle(type = 'ADD', row = {}) {
      this.formType = type
      // 为表单添加数据
      this.formData = row
      this.showDialog = true
    },
    // 表单关闭
    closeFormHandle() {
      this.showDialog = false
    },
    pageReset() {
      this.pageNum = 1
      this.pageSize = 10
    },
    // 改变单页大小
    handleSizeChange(size) {
      this.pageSize = size
      this.fetchData()
    },
    // 翻页
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.fetchData()
    }
  }
}
</script>
